<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>06_列表渲染_过滤与排序</title>
</head>
<body>
<!--
1列表过滤
2列表排序
-->
<div id="demo">
    <input type="text" v-model="searchName">
    <ul>
        <li v-for="(p,index) in filterPersons" :key="index">
        {{index}} ------ {{p.name}}-----{{p.age}}
        </li>
    </ul>

    <button @click="setOrderType(1)">年龄升序</button>
    <button @click="setOrderType(2)">年龄降序</button>
    <button @click="setOrderType(0)">原来顺序</button>
</div>


<script type="text/javascript" src="../js/vue.js"></script>
<script type="text/javascript">
 const vm =new Vue({
     el :'#demo',
     data:{
        searchName:'',
        orderType: 0,//0代表原本，1代表升序，2代表降序
        persons:[
            {name :"第一",age: 11},
            {name :"第二",age: 22},
            {name :"第三",age: 33},
            {name :"aa",age: 25},
            {name :"第一",age: 11}
        ]
     },
     computed:{
         filterPersons(){
            //先取出相关数据
             const {searchName,persons,orderType} = this
             //最终需要选择的数组  很强的搜索不需要与后台交互
             let fPersons;
             fPersons =persons.filter(p => p.name.indexOf(searchName)!==-1)
             //排序
             if(orderType !==0){
                 fPersons.sort(function(p1,p2){ //如果返回正数降序
                     //1升序2降序
                     if(orderType ===2){
                         return p2.age-p1.age;
                     }else {
                         return p1.age-p2.age;
                     }
                 })
             }
             return fPersons
         }
     },
     methods:{
         setOrderType(orderType){

             this.orderType = orderType
         }
    }
 })


</script>
</body>
</html>